import {
  Card,
  Space,
  Button,
  Tooltip,
  RadioGroup,
  Radio,
} from '@douyinfe/semi-ui';
import { IconArrowUpLeft } from '@douyinfe/semi-icons';
import UserDetail from './detail';
import { useNavigate } from 'react-router-dom';
import { useSelector, shallowEqual } from 'react-redux';
import { IRootReducerState } from '@/store/root-reducer';
import { usePageContext } from '../context';
import { useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import UserStepNav from '../step-nav';
import UserEdit from './edit';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form';

const UserEntityCard = ({ editable = false }) => {
  const navigate = useNavigate();

  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {};
  }, [PageContext]);

  const dispatch = useDispatch<any>();
  const {
    user: { entity, entities },
  } = useSelector<IRootReducerState, any>(
    (state) => ({ user: state.user }),
    shallowEqual
  );

  const [detailPanel, setDetailPanel] = useState('info');
  const [formApi, setFormApi] = useState<FormApi<any>>();

  return (
    <Card
      bordered={false}
      title={
        <div className='flex justify-center relative'>
          <Space className='absolute start-0'>
            <Tooltip content='返回'>
              <span style={{ display: 'inline-block' }}>
                <Button
                  icon={<IconArrowUpLeft />}
                  type='tertiary'
                  onClick={() => navigate(-1)}
                />
              </span>
            </Tooltip>
            <UserStepNav />
          </Space>
          <RadioGroup
            type='button'
            defaultValue={detailPanel}
            onChange={(e) => {
              setDetailPanel(e.target.value);
            }}
            name='demo-radio-middle'>
            <Radio value='info'>基本信息</Radio>
            <Radio value='application'>应用信息</Radio>
          </RadioGroup>
        </div>
      }
      headerExtraContent={
        editable ? (
          <Space>
            <Button
              theme='solid'
              onClick={() => {
                console.log(formApi?.getValues());
              }}>
              保存
            </Button>
            <Button onClick={() => navigate(-1)}>取消</Button>
          </Space>
        ) : null
      }>
      {editable ? (
        <>
          <UserEdit formApiRef={setFormApi} />
        </>
      ) : (
        <>
          <UserDetail entity={entity} panelVal={detailPanel} />
        </>
      )}
    </Card>
  );
};

export default UserEntityCard;
